<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反馈与建议</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.4/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/be_current.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>


</head>
<body class="bg-gray-100">

<!-- 右上角按钮容器 -->
<div class="top-right-buttons">
    <!--    <span class="navbar-text" id="username-display">用户:{{current_user()}}</span>-->
    <!-- 切换导航栏按钮 -->
    <button class="toggle-sidebar-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        <i class="glyphicon glyphicon-list"></i>
    </button>
</div>
<!-- 侧边导航栏 -->
<div class="sidebar bg-gray-800 text-white flex flex-col justify-between h-screen">
    <!-- 导航栏顶部 -->
    <div>
        <div class="text-center py-4 border-b border-gray-700">
            <a href="#" class="text-blue-400 font-bold">新零售配送优化</a>
        </div>
        <div class="mt-4">
            <a href="" class="block px-4 py-3 hover:bg-gray-700 ">用户:{{current_user()}}</a>
            <a href="/optimize" class="block px-4 py-3 hover:bg-gray-700">路径优化</a>
            <a href="/history" class="block px-4 py-3 hover:bg-gray-700">历史记录</a>
            <a href="/setting" class="block px-4 py-3 hover:bg-gray-700">路径优化参数设置</a>
            <a href="/help" class="block px-4 py-3 hover:bg-gray-700">帮助/说明页</a>
        </div>
    </div>

    <!-- 导航栏底部 包含切换按钮  -->
    <div>
        <a href="/feedback" class="block px-4 py-3 hover:bg-gray-700">反馈与建议</a>
        <a href="/logout" class="block px-4 py-3 hover:bg-gray-700" onclick="confirmLogout(event)">退出登录</a>
    </div>
</div>

<!-- 添加显示flash消息的区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }}">{{ message }}</div>
    {% endfor %}
  {% endif %}
{% endwith %}

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
            <h2 class="text-center mb-4">反馈与建议</h2>
            <form id="feedbackForm" method="post" action="/feedback">
                <div class="mb-3">
                    <label for="userName" class="form-label">姓名或用户名</label>
                    <input type="text" class="form-control" id="userName" name="userName" value="{{ session.get('user_info').get('username', '') }}">
                </div>
                <div class="mb-3">
                    <label for="userEmail" class="form-label">电子邮件地址</label>
                    <input type="email" class="form-control" id="userEmail" name="userEmail" value="{{ session.get('user_info').get('email', '') }}">
                </div>
                <div class="mb-3">
                    <label for="feedbackType" class="form-label">反馈类型</label>
                    <select class="form-select" id="feedbackType" name="feedbackType">
                        <option value="bugReport">错误报告</option>
                        <option value="featureSuggestion">功能建议</option>
                        <option value="improvement">用户体验改进</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="feedbackContent" class="form-label">反馈内容</label>
                    <textarea class="form-control" id="feedbackContent" name="feedbackContent" rows="5"></textarea>
                </div>
                <div class="d-grid gap-2">
                    <input type="submit" class="btn btn-primary" value="提交反馈">
                </div>
            </form>
            <p class="text-muted mt-3">
                感谢您提供宝贵的反馈！我们将认真查看每一条反馈，并不断努力改善您的使用体验。
            </p>
        </div>
    </div>
</div>

<script src="../static/js/feedback.js"></script>
<script src="../static/js/logout.js"></script>
<script src="../static/js/be_current.js"></script>
</body>
</html>
